<template>
  <div class="app-container">


    <el-form :model="queryParamsTemplate" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="交费月份" prop="searchDate">
        <el-date-picker v-model="searchDate" clearable type="month" size="mini" placeholder="请选择交费月份"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <router-link :to="'/property/estate/rooms?estateId=' + queryParams.estateId" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
      </el-col>
    </el-row>

    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="所在小区" prop="estateId">
            {{form.estateName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房间号" prop="roomNo">
            {{form.roomNo}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房屋面积" prop="roomArea">
            {{form.roomNo+'㎡'}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房主姓名" prop="realName">
            {{form.realName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房主手机号" prop="phoneNum">
            {{form.phoneNum}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="type in feeTypeOptions"
                   :label="type.dictLabel"
                   :name="type.dictValue + ''" >
      </el-tab-pane>
    </el-tabs>

    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="所属小区" align="center" prop="estateName" />
      <el-table-column label="姓名" align="center" prop="realName" />
      <el-table-column label="户号" align="center" prop="roomNo" />
      <el-table-column label="房屋类型" align="center" prop="roomType">
        <template slot-scope="scope">
          <div>
            <!--            房屋类型  0 - 高层 1 - 低层 2- 商业 3 - 别墅 4 - 其他-->
            <el-tag v-if="scope.row.roomType === 0" style="cursor: pointer" :type="''">高层</el-tag>
            <el-tag v-if="scope.row.roomType === 1" style="cursor: pointer" :type="''">低层</el-tag>
            <el-tag v-if="scope.row.roomType === 2" style="cursor: pointer" :type="''">商业</el-tag>
            <el-tag v-if="scope.row.roomType === 3" style="cursor: pointer" :type="''">别墅</el-tag>
            <el-tag v-if="scope.row.roomType === 4" style="cursor: pointer" :type="''">其他</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="房屋面积" v-if="queryParamsTemplate.feeType === 'wyf'" align="center" prop="roomArea">
        <template slot-scope="scope">{{scope.row.roomArea +'㎡'}}</template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="phoneNum" width="110"/>
      <el-table-column label="车牌号" v-if="queryParamsTemplate.feeType === 'car'" align="center" prop="carNum" width="100"/>
      <el-table-column label="交费状态" align="center" prop="state" >
        <!--        0 - 未交费  1 - 已交费-->
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.state === 0" style="cursor: pointer" :type="'danger'">未交费</el-tag>
            <el-tag v-if="scope.row.state === 1" style="cursor: pointer" :type="'success'">已交费</el-tag>
            <el-tag v-if="scope.row.state === 2" style="cursor: pointer" :type="'success'">线下交费</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否车库" align="center" prop="state">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.isGarage === 0" style="cursor: pointer" :type="''">住宅</el-tag>
            <el-tag v-if="scope.row.isGarage === 1" style="cursor: pointer" :type="'success'">车库</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="费用类型" align="center" prop="feeType" width="100">
        <!--        wyf - 物业费 rubbish - 垃圾处理费 car - 车位费  water - 水费 ，eletrict - 电费 ，jiaya - 加压费-->
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.feeType === 'wyf'" style="cursor: pointer" :type="''">物业费</el-tag>
            <el-tag v-if="scope.row.feeType === 'rubbish'" style="cursor: pointer" :type="'success'">垃圾处理费</el-tag>
            <el-tag v-if="scope.row.feeType === 'car'" style="cursor: pointer" :type="'warning'">车位服务费</el-tag>
            <el-tag v-if="scope.row.feeType === 'water'" style="cursor: pointer" :type="'success'">代收水费</el-tag>
            <el-tag v-if="scope.row.feeType === 'jiaya'" style="cursor: pointer" :type="''">供水转换费</el-tag>
            <el-tag v-if="scope.row.feeType === 'eletrict'" style="cursor: pointer" :type="'warning'">代收电费</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="费用时间" align="center" prop="yearNum" width="120">
        <template slot-scope="scope">
          {{ scope.row.yearNum +' 年' +  scope.row.monthNum +' 月' }}
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="singlePrice">
        <template slot-scope="scope">
          <div>{{  (scope.row.singlePrice != null ? scope.row.singlePrice : 0.00) + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="总价" align="center" prop="totalPrice" >
        <template slot-scope="scope">
          <div>{{ (scope.row.totalPrice != null ? scope.row.totalPrice : 0.00) + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="paidCount">
        <template slot-scope="scope">
          <div v-if="scope.row.feeType === 'car'">{{ parseInt(scope.row.paidCount) + '个' }}</div>
          <div v-else-if="scope.row.feeType === 'water'">{{ parseInt(scope.row.paidCount) + '³' }}</div>
          <div v-else>{{ scope.row.paidCount }}</div>
        </template>
      </el-table-column>
      <el-table-column label="已支付金额" align="center" prop="paidPrice" width="120">
        <template slot-scope="scope">
          <div>{{(scope.row.paidPrice != null ? scope.row.paidPrice : 0.00) + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" align="center" prop="youhuiPrice">
        <template slot-scope="scope">
          <div>{{ (scope.row.youhuiPrice != null ? scope.row.youhuiPrice : 0.00) + '元'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="备注信息" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['module:feeOrderTemp:edit']">修改</el-button>
<!--          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"-->
<!--                     v-hasPermi="['module:feeOrderTemp:remove']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParamsTemplate.pageNum"
                :limit.sync="queryParamsTemplate.pageSize"
                @pagination="getList" />

    <!-- 添加或修改小区内的房屋列信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="formTemplate" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用状态" prop="state">
              <el-radio-group v-model="formTemplate.state" size="mini">
                <el-radio :value="0" :label="0">未交费</el-radio>
                <el-radio :value="1" :label="1">已交费</el-radio>
                <el-radio :value="2" :label="2">线下交费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所在小区" prop="estateId">
              <el-select v-model="formTemplate.estateId" placeholder="请选择小区" size="mini" style="width:100%;" filterable clearable>
                <el-option v-for="estate in estatesOptions"
                           :key="estate.id"
                           :label="estate.estateName"
                           :value="estate.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="费用类型" prop="feeType">
              <el-select v-model="formTemplate.feeType" placeholder="请选择费用类型" size="mini" style="width:100%;" filterable clearable>
                <el-option v-for="dict in feeTypeOptions"
                           :key="dict.dictValue"
                           :label="dict.dictLabel"
                           :value="dict.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否车库" prop="isGarage">
              <el-radio-group v-model="formTemplate.isGarage" size="mini">
                <el-radio :value="0" :label="0">住宅</el-radio>
                <el-radio :value="1" :label="1">车库</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="房间户号" prop="roomNo">
              <el-input v-model="formTemplate.roomNo" placeholder="请输入房间户号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'wyf'">
            <el-form-item label="房屋面积" prop="roomArea">
              <el-input v-model="formTemplate.roomArea" placeholder="请输入房屋面积" size="mini">
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年份" prop="yearNum">
              <el-input v-model="formTemplate.yearNum" placeholder="请输入年份" size="mini">
                <template slot="append">年</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="月份" prop="monthNum">
              <el-input v-model="formTemplate.monthNum" placeholder="请输入月份" size="mini">
                <template slot="append">月份</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="formTemplate.realName" placeholder="请输入姓名" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号" prop="phoneNum">
              <el-input v-model="formTemplate.phoneNum" placeholder="请输入手机号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'water' || formTemplate.feeType == 'eletrict'">
            <el-form-item label="起止数" prop="beginCount">
              <el-input v-model="formTemplate.beginCount" placeholder="请输入起数" size="mini" style="width:100px;"/> ~
              <el-input v-model="formTemplate.endCount" placeholder="请输入止数" size="mini" style="width:100px;"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="数量" prop="paidCount">
              <el-input  v-model="formTemplate.paidCount" type="number" placeholder="请输入数量" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单价" prop="singlePrice">
              <el-input v-model="formTemplate.singlePrice" type="number" placeholder="请输入单价" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="当前应交" prop="totalPrice">
              <el-input v-model="formTemplate.totalPrice" type="number" placeholder="请输入当前月份应交" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="优惠金额" prop="youhuiPrice">
              <el-input v-model="formTemplate.youhuiPrice" type="number" placeholder="请输入优惠金额" size="mini">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="formTemplate.feeType == 'car'">
            <el-form-item label="车牌号" prop="carNum">
              <el-input v-model="formTemplate.carNum" placeholder="请输入车牌号" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注信息" prop="remark">
              <el-input type="textarea" rows="2" v-model="formTemplate.remark" placeholder="请输入备注信息" size="mini"/>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" v-if="formTemplate.isCanEdit === 1"  type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import { listRoom, getRoom, delRoom, addRoom, updateRoom, exportRoom } from "@/api/module/estate/room";
  import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, exportTemplate, importTemplateWyf,importTemplateSdJ } from "@/api/module/estate/wyfTemplate";

  import { listAllEstate } from "@/api/module/estate/estate";
  export default {
    name: "Room",
    data() {
      return {
        activeName:'wyf',
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        dateRange:[],
        // 小区内的房屋列信息表格数据
        templateList: [],
        estatesOptions:[],
        feeTypeOptions:[],
        yearList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        searchDate:undefined,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roomId:undefined,
          estateId: undefined,
        },
        queryParamsTemplate: {
          pageNum: 1,
          pageSize: 10,
          roomId:undefined,
          estateId: undefined,
          feeType:undefined,
          yearNum:undefined,
          monthNum:undefined,
          state:undefined,
        },
        // 表单参数
        form: {},
        formTemplate:{},
        // 表单校验
        rules: {
        },
      };
    },
    created() {
      this.queryParams.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : 0;
      this.queryParams.roomId = this.$route.query.roomId ? parseInt(this.$route.query.roomId) : 0;
      this.queryParamsTemplate.state= this.$route.query.state ? parseInt(this.$route.query.state) : undefined;
      this.getRoomDetail(this.queryParams.roomId);

      this.queryParamsTemplate.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : 0;
      this.queryParamsTemplate.roomId = this.$route.query.roomId ? parseInt(this.$route.query.roomId) : 0;


      this.getDicts("wyf_fee_type").then(response => {
        this.feeTypeOptions = response.data;
        console.log('this.feeTypeOptions[0].dictValue',this.feeTypeOptions[0].dictValue);
        this.queryParamsTemplate.feeType = this.feeTypeOptions[0].dictValue;
        this.getList();
      });
    },
    methods: {
      /** 修改按钮操作 */
      getRoomDetail(roomId) {
        this.reset();
        getRoom(roomId).then(response => {
          this.loading = false;
          this.form = response.data;
        });
      },
      handleClick(val){
        console.log('handleClick',val.name);
        this.activeName = val.name;
        this.queryParamsTemplate.feeType = val.name;
        this.getList();
      },
      /** 查询小区内的房屋列信息列表 */
      getList() {
        this.loading = true;
        console.log('this.queryParamsTemplate',this.queryParamsTemplate);
        listTemplate(this.queryParamsTemplate).then(response => {
          this.templateList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length!==1;
        this.multiple = !selection.length
      },
      getEstateList() {
        listAllEstate().then(response => {
          this.estatesOptions = response.data;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.loading = true;
        this.getEstateList();
        const id = row.id || this.ids;
        getTemplate(id).then(response => {
          this.loading = false;
          this.formTemplate = response.data;
          if(this.formTemplate.feeType =='car'){
            this.formTemplate.paidCount = parseInt(this.formTemplate.paidCount+'');
          }
          this.open = true;
          this.title = "修改物业费相关费用的模板";
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.formTemplate = {
          id: undefined,
          estateId: this.queryParams.estateId,
          estateName: undefined,
          realName: undefined,
          roomNo: undefined,
          feeOrderId: undefined,
          roomArea: undefined,
          roomId: this.queryParams.roomId,
          phoneNum: undefined,
          carNum: undefined,
          feeType: undefined,
          isGarage:undefined,
          yearNum: undefined,
          roomType: undefined,
          monthNum: undefined,
          singlePrice: undefined,
          totalPrice: undefined,
          paidPrice: undefined,
          youhuiPrice: undefined,
          unPayPrice: undefined,
          paidCount: undefined,
          isBand: undefined,
          bangWxUserId: undefined,
          beginCount:undefined,
          endCount:undefined,
          state: undefined,
          remark: undefined,
          payDate: undefined,
          paidMonth: undefined,
          createTime: undefined,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsTemplate.pageNum = 1;
        console.log('searchDate',this.searchDate);


        // var begin = this.dateRange[0];
        // var begin_year = begin.getFullYear();
        // var begin_month = begin.getMonth() + 1;
        // var begin_day = "1";
        //
        // var beginDate = begin_year + "-" + begin_month + "-" + begin_day;
        //
        //
        // var end = this.dateRange[1];
        // var end_year = end.getFullYear();
        // var end_month = end.getMonth() + 1;
        // var end_day = new Date(end_year, end_month, 0).getDate();
        // var endDate = end_year + "-" + end_month + "-" + end_day;


        var year = this.searchDate.getFullYear();
        var month = this.searchDate.getMonth() + 1;
        console.log('year',year);
        console.log('month',month);

        this.queryParamsTemplate.yearNum = year;
        this.queryParamsTemplate.monthNum = month;
        // month
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateTemplate(this.formTemplate).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addTemplate(this.formTemplate).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除小区内的房屋列信息编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.loading = true;
          return delTemplate(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有小区内的房屋列信息数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportTemplate(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
    }
  };
</script>
